<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="J__wdtVoice"></div>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
    <script>
        
// >>> 【按住说话核心模块】------------------------------------------
// ...按住说话
var _voiceObj = $(".J__wdtVoice"), eY1 = 0, eY2 = 0, eY3 = 0, isDrag = true;
var voiceIdx;
var difftime = 0;
function initVoice(){
	_voiceObj.on("touchstart", function(e){
		difftime = new Date();
		if(!isDrag) return;
		isDrag = false;
		eY1 = e.originalEvent.targetTouches[0].pageY;
		_voiceObj.text("松开 结束");
 
		// 弹窗提示
		voiceIdx = wcPop({
			id: 'wdtVoice',
			skin: 'toast',
			content: '<div style="margin-top:-10px;"><i class="iconfont icon-yuyin" style="font-size:65px;"></i><div style="line-height:32px;">手指上滑，取消发送</div></div>',
			style: 'border-radius:6px;height: 160px; width:160px;',
			time: 10,
			opacity: 0,
		});
 
		_voiceObj.on("touchmove", function (e) {
			e.preventDefault();
 
			eY3 = e.originalEvent.targetTouches[0].pageY;
			if(eY1 - eY3 < 150){
				_voiceObj.text("松开 结束");
			}else{
				_voiceObj.text("松开手指，取消发送");
 
				// 弹窗提示
				$("#wdtVoice .popui__panel-cnt").html('<div style="margin-top:-10px;"><i class="iconfont icon-quxiao" style="font-size:65px;"></i><div style="background:#c53838; border-radius:3px; line-height:32px;">松开手指，取消发送</div></div>');
			}
		});
	});
	_voiceObj.on("touchend", function (e) {
		e.preventDefault();
		eY2 = e.originalEvent.changedTouches[0].pageY;
		_voiceObj.text("按住 说话");
 
		// 录音时间太短提示
		if(new Date() - difftime < 1000){
			// 弹窗提示
			$("#wdtVoice .popui__panel-cnt").html('<div style="margin-top:-10px;"><i class="iconfont icon-gantan" style="font-size:65px;"></i><div style="line-height:32px;">录音时间太短！</div></div>');
		} else{
			if (eY1 - eY2 < 150) {
				// 发送成功
				submitData();
				console.log("测试数据");
			} else {
				// 取消发送
				console.log("cancel");
			}
		}
		// 关闭弹窗
		setTimeout(function(){
			wcPop.close(voiceIdx);
		}, 500);
		isDrag = true;
	});
}
    </script>
</body>
</html>